<template>
  <div class="profile-container">
    <a-card title="个人设置" :bordered="false">
      <a-form
        :model="formState"
        name="profile-form"
        layout="vertical"
        @finish="handleSubmit"
      >
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="formState.username" disabled />
        </a-form-item>
        
        <a-form-item label="姓名" name="realname">
          <a-input v-model:value="formState.realname" />
        </a-form-item>
        
        <a-form-item label="电子邮箱" name="email">
          <a-input v-model:value="formState.email" />
        </a-form-item>
        
        <a-form-item>
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    
    <a-card title="修改密码" :bordered="false" style="margin-top: 24px">
      <a-form
        :model="passwordForm"
        name="password-form"
        layout="vertical"
        @finish="handlePasswordChange"
      >
        <a-form-item
          label="当前密码"
          name="oldPassword"
          :rules="[{ required: true, message: '请输入当前密码' }]"
        >
          <a-input-password v-model:value="passwordForm.oldPassword" />
        </a-form-item>
        
        <a-form-item
          label="新密码"
          name="newPassword"
          :rules="[
            { required: true, message: '请输入新密码' },
            { min: 6, message: '密码长度不能少于6个字符' }
          ]"
        >
          <a-input-password v-model:value="passwordForm.newPassword" />
        </a-form-item>
        
        <a-form-item
          label="确认新密码"
          name="confirmPassword"
          :rules="[
            { required: true, message: '请确认新密码' },
            { validator: validateConfirmPassword }
          ]"
        >
          <a-input-password v-model:value="passwordForm.confirmPassword" />
        </a-form-item>
        
        <a-form-item>
          <a-button type="primary" html-type="submit">更新密码</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';

// 个人信息表单
const formState = reactive({
  username: 'admin',
  realname: '系统管理员',
  email: 'admin@example.com'
});

// 密码修改表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 确认密码验证
const validateConfirmPassword = (rule, value) => {
  if (value !== passwordForm.newPassword) {
    return Promise.reject('两次输入的密码不一致');
  }
  return Promise.resolve();
};

// 提交个人信息表单
const handleSubmit = async () => {
  try {
    // 这里实现更新个人资料的API调用
    // const response = await axios.put('/admin/api/users/profile', formState);
    message.success('个人信息更新成功');
  } catch (error) {
    console.error('更新个人信息错误', error);
    message.error('更新个人信息失败');
  }
};

// 提交密码修改表单
const handlePasswordChange = async () => {
  try {
    // 这里实现修改密码的API调用
    // const response = await axios.put('/admin/api/users/change-password', passwordForm);
    message.success('密码修改成功');
    // 清空表单
    passwordForm.oldPassword = '';
    passwordForm.newPassword = '';
    passwordForm.confirmPassword = '';
  } catch (error) {
    console.error('修改密码错误', error);
    message.error('修改密码失败');
  }
};
</script>

<style scoped>
.profile-container {
  padding: 24px;
}
</style> 